<template>
    <div>
    <h1>户型信息显示</h1>
    <a href="/">新增</a>
    户型结构<select v-model="page.typeids">
<option v-for="s in types" :value="s.typeid">{{s.typename}}</option>
                </select>
                户型名称 <input type="text" v-model="page.names">
                <input type="button" value="查询" @click="cha">
                <input type="button" value="重置" @click="chog">

            
    <table>
        <thead>
            <tr>
                <td>户型名称</td>
                <td>户型结构</td>
                <td>建筑面积</td>
                <td>套内面积</td>
                <td>图片</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="m in data">
                <td>{{m.hname}}</td>
                <td>{{m.typeid}}</td>
                <td>{{m.hmianji}}</td>
                <td>{{m.htaoji}}</td>
                <td> <img style="height: 100px; width: 100px;" :src="'https://localhost:7131'+m.himg"></td>
                <td>{{m.hsates?"启用":"禁用"}}</td>
                <td>
                    <a :href="'https://localhost:7131'+m.himg" target="_blank">查看</a>
                    <input type="button" value="逻辑删除" @click="luoDel(m.hid)">
                    <input type="button" value="修改" @click="Enid(m.hid)">


                </td>
            </tr>
        </tbody>
    </table>
    </div>
    <input type="button" value="首页" @click="Fanye(1)">
    <input type="button" value="上一页" @click="Fanye(2)">
    <input type="button" value="下一页" @click="Fanye(3)">
    <input type="button" value="尾页" @click="Fanye(4)">
    一共{{paga.pcount}}页，一共{{paga.count}}行，每页{{page.size}}行，当前第{{page.index}}页
    <select v-model="page.size" @change="rong">
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
    <input type="text" v-model="page.index">
    <input type="button" value="跳转" @click="tiao">
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router=useRouter();

const data=ref([{
    "hid": 0,
  "hname": "",
  "typeid": 0,
  "hmianji": 0,
  "htaoji": 0,
  "himg": "string",
  "hsates": true
}])
const types=ref([{
    "typeid": 0,
    "typename": ""
    }])
    const Getdatae=()=>
{
    axios.get("https://localhost:7131/api/type/xia").then(res=>
        {
            types.value=res.data;
        }
    )
}

const Enid=(vid:any)=>
{
    router.push({path:"/Enidt",query:{id:vid}})
}

const chog=()=>
{
    page.value={ index:1,
    size:3,
    typeids:"",
    names:""}
    Getdata()
}

const cha=()=>
{
    page.value.index=1;
    Getdata()
}


const tiao=()=>
{
    if(page.value.index>=1&&page.value.index<=paga.value.pcount)
{
    Getdata()
}
}

const rong=()=>
{
    page.value.index=1;
    Getdata()
}


const Fanye=(vid:any)=>
{
if(vid==1)
{
    page.value.index=1;
    Getdata()
}
if(vid==2)
{
    if(page.value.index>1)
{
    page.value.index-=1;
    Getdata()
}
}

if(vid==3)
{
    if(page.value.index<paga.value.pcount)
{
    page.value.index+=1;
    Getdata()
}
}

if(vid==4)
{
    page.value.index=paga.value.pcount;
    Getdata()
}



}


const paga=ref({
    count:0,
    pcount:0
})


const page=ref({
    index:1,
    size:3,
    typeids:"",
    names:""
})
onMounted(()=>
{
    Getdata();
    Getdatae();
})


const Getdata=()=>
{
 axios.get("https://localhost:7131/api/hotel/fen",{params:page.value}).then(res=>
{
    data.value=res.data.data;
    paga.value.count=res.data.count;
    paga.value.pcount=Math.ceil(paga.value.count/page.value.size);
}
 )
}

const luoDel=(vid:any)=>
{
    if(confirm("确认删除吗?"))
{
    axios.delete("https://localhost:7131/api/hotel/Del",{params:{id:vid}}).then(res=>
{
    if(res.data>0)
{
    alert("逻辑删除成功");
    Getdata()
}
else{
    alert("逻辑删除失败");
}
}
)
}

}
</script>

<style scoped>

</style>